<template>
    <div id="wallet">
        <div class="body-con" >
            <div class="count">
                <div class="count-text">账户余额</div>
                <div class="count-num van-row--flex"><span class="num">223.00元</span><span class="count-detail" @click="getDetail">明细<van-icon name="arrow" /></span></div>
            </div>
            <div class="tab-content">
                <van-grid :border="false" :column-num="4">
                    <van-grid-item @click="invest">
                        <div>
                            <i class="icon-chongzhi iconfont"></i>
                        </div>
                        <div class="text">
                            充值
                        </div>
                        <div class="many"></div>
                    </van-grid-item>
                    <van-grid-item @click="coupon">
                        <div>
                            <i class="icon-youhuiquan iconfont"></i>
                        </div>
                        <div class="text">
                            优惠券
                        </div>
                        <div class="many">5张</div>
                    </van-grid-item>
                    <van-grid-item>
                        <div>
                            <i class="icon-wodeyueka iconfont"></i>
                        </div>
                        <div class="text">
                            我的月卡
                        </div>
                        <div class="many">1张</div>
                    </van-grid-item>
                    <van-grid-item @click="getMyOrder">
                        <div>
                            <i class="icon-wodedingdan iconfont"></i>
                        </div>
                        <div class="text">
                            我的订单
                        </div>
                        <div class="many"></div>
                    </van-grid-item>
                </van-grid>
            </div>
            <div class="mounth-card-content">
				
                <div class="mounth-card">
					<img src="../../assets/images/monthly.png" alt="" style="float: left;">
					<div style="float: left;">
						<div>
							充电包月卡
						</div>
					<div>
						限时优惠进行中
					</div>
					</div>
				
                    <van-button round type="info" size="mini" style="float: right;">购买</van-button>
                </div>
            </div>
        </div>
        <div class="footer-content">
          <div class="title">活动专区</div>
          <div class="swip-h">
              <van-swipe @change="onChange">
                  <van-swipe-item v-for="(image, index) in images" :key="index">
                      <img v-lazy="image" />
                  </van-swipe-item>
              </van-swipe>
          </div>
        </div>
			<w-tabbar @change="onChange"></w-tabbar>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                images: [
                    'https://img.yzcdn.cn/vant/apple-1.jpg',
                    'https://img.yzcdn.cn/vant/apple-2.jpg'
                ]
            }
        },
        mounted() {
        },
        methods: {
            onChange(val) {
                console.log(val, 333)
            },
            getDetail() {
                this.$router.push('/wechat/wallet/detail')
            },
            invest() {
                this.$router.push('/wechat/wallet/investMoney')
            },
            getMyOrder() {
                this.$router.push('/wechat/myOrder')
            },
            coupon() {
                this.$router.push('/wechat/wallet/counpon')
            }
        }
    }
</script>

<style scoped lang="scss">
    #wallet {
        font-size: 12px;
        .body-con {
            padding: 20px;
          
            .count {
                    height: 3.2rem;
                    border-top-right-radius: 10px;
                    border-top-left-radius: 10px;
                    background-color: #4f88f1;
                    color: #ffffff;
                .count-text {
                    padding: 30px 0px 6px 16px;
                }
                .count-num {
                    padding: 12px 0 8px 16px;
                    .num {
                        font-size: 0.8rem;
                        flex: 1;
                    }
                    .count-detail {
                        text-align: right;
                        flex: 1;
                        padding-right: 12px;
                        line-height: 1.6rem;
                    }
                }
            }
            .iconfont {
				color: #1989fa;
               	font-size: px2rem(20);
                padding: 4px;
            }
            .many {
                color: #a2a4b1;
                font-size: 0.1rem;
            }
            .tab-content {
                .text {
                    padding: 4px 0;
                }
            }
            .mounth-card-content {
                .mounth-card {
				overflow: hidden;
                    height: 1.8rem;
                    border-radius: 10px;
                    line-height: 1.8rem;
                    padding: 0 12px;
                    background-color: #dfeffe;
                    margin: 15px 0 2px 0;
                }
            }
        }
        .footer-content {
            padding: 16px;
            margin-top: 10px;
            .title {
                font-size: 0.5rem;
                height: 1.2rem;
                line-height: 1.2rem;
            }
            .swip-h {
                height: 4rem;
                margin-top: 10px;
                position: relative;
            }
        }
    }
</style>
<style>
    #wallet .van-grid-item__content--center {
        box-align: center;
        align-items: center;
        justify-content: flex-start;
    }
    #wallet .van-grid-item__content {
        background-color:inherit
    }
    #wallet .van-swipe {
        height: 2.2rem;
        border-radius: 3rem;
        position: initial;
    }
    #wallet .van-swipe .van-swipe__indicator {
        width: 24px;
        height: 8px;
        border-radius: 10px;
        opacity: 1;
    }
    #wallet .van-swipe .van-swipe__indicators {
        left: 24px;
        top: 2.5rem
    }
</style>
